<template>
  <div>
    <div class="synopsis d-flex justify-center flex-wrap">
      <div class="synopsis_text mb-6 d-flex justify-center flex-column">
        <h2 class="mb-6">云分析</h2>
        <h2 class="mb-6">比自己更了解自己</h2>
        <div class="mb-6">
          <v-btn depressed color="primary"> 立即体验 </v-btn>
        </div>
      </div>
      <div class="synopsis_img purple lighten-5 mb-6">
        <v-img
          lazy-src="../../src/assets/imgs/bigdata01.gif"
          src="../../src/assets/imgs/bigdata01.gif"
          width="100%"
          height="100%"
        ></v-img>
      </div>
    </div>

    <div class="d-flex justify-center">
      <h3>体验更多</h3>
    </div>
    <div
      class="
        items
        d-flex
        justify-center
        flex-wrap
        mb-6
        grey
        lighten-4
        rounded-lg
      "
    >
      <div class="item d-flex justify-center align-center">
        <v-hover v-slot="{ hover }"
          ><div
            class="
              item_card
              white
              rounded-lg
              d-flex
              justify-center
              align-start
              flex-column
            "
            :class="{ 'on-hover': hover }"
          >
            <div
              class="
                icon
                blue
                lighten-5
                d-flex
                justify-center
                align-center
                mb-3
                rounded-lg
              "
            >
              <div>
                <v-img
                  lazy-src="../../src/assets/icon/tongjitu.png"
                  src="../../src/assets/icon/tongjitu.png"
                  width="45px"
                  height="40px"
                ></v-img>
              </div>
            </div>
            <div class="font-weight-black h4 mb-3">领导能力测试</div>
            <div class="text-justify text-sm-body-2">
              通过特定算法，得出结论
            </div>
          </div>
        </v-hover>
      </div>
      <div class="item d-flex justify-center align-center">
        <v-hover v-slot="{ hover }"
          ><div
            class="
              item_card
              white
              rounded-lg
              d-flex
              justify-center
              align-start
              flex-column
            "
            :class="{ 'on-hover': hover }"
          >
            <div
              class="
                icon
                blue
                lighten-5
                d-flex
                justify-center
                align-center
                mb-3
                rounded-lg
              "
            >
              <div>
                <v-img
                  lazy-src="../../src/assets/icon/rengongshenjingwangluoxunlian.png"
                  src="../../src/assets/icon/rengongshenjingwangluoxunlian.png"
                  width="45px"
                  height="40px"
                ></v-img>
              </div>
            </div>
            <div class="font-weight-black h4 mb-3">负面情绪测试</div>
            <div class="text-justify text-sm-body-2">解决抑郁检测难题</div>
          </div>
        </v-hover>
      </div>
      <div class="item d-flex justify-center align-center">
        <v-hover v-slot="{ hover }"
          ><div
            class="
              item_card
              white
              rounded-lg
              d-flex
              justify-center
              align-start
              flex-column
            "
            :class="{ 'on-hover': hover }"
          >
            <div
              class="
                icon
                blue
                lighten-5
                d-flex
                justify-center
                align-center
                mb-3
                rounded-lg
              "
            >
              <div>
                <v-img
                  lazy-src="../../src/assets/icon/chuangjiansuijidian.png"
                  src="../../src/assets/icon/chuangjiansuijidian.png"
                  width="45px"
                  height="40px"
                ></v-img>
              </div>
            </div>
            <div class="font-weight-black h4 mb-3">基础性格测试</div>
            <div class="text-justify text-sm-body-2">
              预测性格，帮助学校管理学生
            </div>
          </div>
        </v-hover>
      </div>
      <div class="item d-flex justify-center align-center">
        <v-hover v-slot="{ hover }"
          ><div
            class="
              item_card
              white
              rounded-lg
              d-flex
              justify-center
              align-start
              flex-column
            "
            :class="{ 'on-hover': hover }"
          >
            <div
              class="
                icon
                blue
                lighten-5
                d-flex
                justify-center
                align-center
                mb-3
                rounded-lg
              "
            >
              <div>
                <v-img
                  lazy-src="../../src/assets/icon/diedaiwenjian.png"
                  src="../../src/assets/icon/diedaiwenjian.png"
                  width="45px"
                  height="40px"
                ></v-img>
              </div>
            </div>
            <div class="font-weight-black h4 mb-3">更多类型测试</div>
            <div class="text-justify text-sm-body-2">查看更多测试内容</div>
          </div>
        </v-hover>
      </div>
    </div>

    <div class="synopsis d-flex justify-center flex-wrap mb-10">
      <div class="synopsis_img mb-6">
        <v-img
          lazy-src="../../src/assets/imgs/bigdata02.gif"
          src="../../src/assets/imgs/bigdata02.gif"
          width="100%"
          height="100%"
        ></v-img>
      </div>
      <div class="synopsis_text mb-6 grey lighten-4 rounded-lg">
        <v-list flat class="grey lighten-4 rounded-lg">
          <v-subheader>相关资讯</v-subheader>
          <v-list-item-group>
            <v-list-item v-for="(item, i) in items" :key="i">
              <v-list-item-content>
                <a>
                  <v-list-item-title
                    v-text="item.text"
                    class="caption text-justify"
                  ></v-list-item-title>
                </a>
              </v-list-item-content>
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  data: () => {
    return {
      items: [
        { text: "什么是大数据分析系统", icon: "mdi-clock" },
        { text: "大数据能干什么", icon: "mdi-account" },
        { text: "利用大数据来获取受益", icon: "mdi-flag" },
        { text: "大数据就在我们身边", icon: "mdi-flag" },
        { text: "创建我们的大数据化产品", icon: "mdi-flag" },
        { text: "机器学习，对人们生活的影响", icon: "mdi-flag" },
      ],
    };
  },
};
</script>

<style  scoped>
.synopsis {
  width: 100%;
  height: 100%;
}
.synopsis_text {
  width: 35%;
  height: 400px;
  align-items: flex-end;
}
.synopsis_img {
  width: 65%;
  height: 400px;
}

.item {
  width: 280px;
  height: 280px;
}

.item_card {
  width: 245px;
  height: 245px;
  transition: 0.4s ease-in-out;
  box-shadow: 2px 2px 20px 1px rgba(209, 196, 233, 0.5);
  padding: 10px;
}
.item_card:not(.on-hover) {
  /* opacity: 0.6; */
  width: 240px;
  height: 240px;
  box-shadow: 2px 2px 20px 1px rgba(209, 196, 233, 0.5);
  padding: 10px;
}
.icon {
  width: 65px;
  height: 60px;
}

@media screen and (max-width: 1280px){
  
  .item {
    margin: 20px;
  }
}

@media screen and (max-width: 760px) {
  .synopsis_text {
    width: 100%;
    height: 300px;
    align-items: center;
  }
  .synopsis_img {
    width: 100%;
    height: 400px;
  }
  .item {
    width: 100%;
    margin: 0px;
  }
}

</style>